<template>
	<view v-if="props.needSkeleton" class="coreshop-skeleton">
		<uv-skeletons :skeleton="props.skeleton" :loading="props.skeletonLoading">
			<coreshop-page-content v-bind="props">
				<slot name="default" />
			</coreshop-page-content>
		</uv-skeletons>
	</view>

	<template v-else>
		<coreshop-page-content v-bind="props">
			<slot name="default" />
		</coreshop-page-content>
		<template v-if="props.needLoadingPage">
			<uv-loading-page :loading="props.loadingPage" :loading-text="props.loadingText"
				:font-size="props.loadingTextFontSize" :color="props.loadingColor" :loadingColor="loadingColor"
				:bgColor="props.loadingBgColor"></uv-loading-page>
		</template>
	</template>
</template>
<script setup lang="ts">
	const props = withDefaults(defineProps<{
		isBack ?: boolean,
		bgColor ?: string,
		titleColor ?: string,
		mode ?: "left" | "center",
		title ?: string;
		isShowStatusBarHeight ?: boolean;
		customStyle ?: any;
		contentStyle ?: any;
		handleCustomRouteJump ?: () => void,
		showLoginModalDom ?: boolean;
		needSkeleton ?: boolean;
		skeleton ?: Array<{ [key : string] : any }>;
		skeletonLoading ?: boolean;
		placeholder ?: boolean;
		loadingPage ?: boolean;
		needLoadingPage ?: boolean;
		loadingText ?: string;
		loadingTextFontSize ?: string;
		loadingBgColor ?: string;
		loadingColor ?: string;

	}>(), {
		isBack: true,
		bgColor: '#eef2f6',
		titleColor: '#000',
		mode: 'center',
		title: '',
		isShowStatusBarHeight: true,
		customStyle: {},
		contentStyle: {},
		showLoginModalDom: false,
		needSkeleton: false,
		skeleton: [],
		skeletonLoading: false,
		placeholder: true,
		loadingPage: false,
		needLoadingPage: false,
		loadingText: '加载中...',
		loadingTextFontSize: '24rpx',
		loadingBgColor: 'rgba(255, 255, 255, 0.2)',
		loadingColor: '#d33123'
	});
</script>
<style lang="scss" scoped>
	.coreshop-skeleton {
		background-color: #fff;
	}
</style>